<template>
  <div style="width: 550px; height: 550px" ref="ghjsmap"></div>
</template>
<script>
import * as echarts from "echarts";
import geoJson from "../../assets/map/zhejiang.json";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initZheJiang();
  },
  created() {},
  computed: {},
  methods: {
    initZheJiang() {
      var dataList = [{ name: "杭州市", value: 100 }];

      var mapChart = echarts.init(this.$refs.ghjsmap);
      echarts.registerMap("浙江", geoJson); //#2

      let option = {
        series: [
          {
            name: "浙江地图",
            type: "map",
            mapType: "浙江", //#3
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
            },
            data: dataList,
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function (val) {
            return val.data.name + "<br>人数: " + val.data.value + "人";
          },
        }
      };
      mapChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
